<template>
  <div>
    <h1 align="center">全国各城市原力值折线图</h1>
    <div ref="echarts" class="chart"></div>
  </div>

</template>

<script>
import * as echarts from 'echarts';
import {getForceInfo} from "@/server/screen-data";

export default {
  data() {
    return {
      chartData: [
        {city: '北京', value: 100},
        {city: '上海', value: 80},
        {city: '广州', value: 50},
        {city: '深圳', value: 70},
        {city: '杭州', value: 60},
      ],
      UserData: [],//原始用户数据
      UserList: [],//原始的list中用户数据
      scoreByCity: [],//统计数据
    };
  },

  created() {
  },
  mounted() {
    this.getlist()
    this.renderChart();
  },

  methods: {
    //获取原始数据列表,做了缓存处理
    getlist() {
      let cacheData = localStorage.getItem('UserData')
      if (cacheData) {
        this.UserData = JSON.parse(cacheData)
        this.UserData.forEach(city => {
          city.list.forEach(user => {
            this.UserList.push(user)
            })
        })
        return
      }
      getForceInfo().then((res) => {
        if (res.status == 200) {
          this.UserData = res.data.data.cityInfoList
          this.UserData.forEach(city => {
            city.list.forEach(user => {
              this.UserList.push(user)
            })
          })
          localStorage.setItem('UserData', JSON.stringify(this.UserData))
        }
      }).catch(() => {

      })
    },

    calcScoreByCity() {
      let scoreByCity = []
      this.UserList.forEach(user => {
        let foundCity = scoreByCity.find(city => city.city === user.city)
        if (foundCity) {
          foundCity.score += user.score
        } else {
          scoreByCity.push({ city: user.city, score: user.score })
        }
      })
      return scoreByCity
    },

    renderChart() {
      let chart = echarts.init(this.$refs.echarts);

      let options = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.7)', // 提示框背景色
          padding: 10, // 内边距
          textStyle: {
            color: '#fff', // 文字颜色
            fontSize: 12, // 文字大小
            fontWeight: 'bold', // 文字加粗
          },
          formatter: function(params) { // 提示框内容格式
            return `<div style="font-size: 12px">${params[0].name}</div>
                <div style="font-size: 12px">${params[0].marker} ${params[0].seriesName}: ${params[0].value}</div>`;
          },
          axisPointer: { // 坐标轴指示器
            type: 'line', // 默认为直线，可选为：'line' | 'shadow' | 'cross'
            lineStyle: {
              color: '#6CB1FF', // 指示线颜色
            },
          },
        },
        xAxis: {
          type: 'category',
          data: this.UserList.map(item => item.city),
          axisTick: {
            alignWithLabel: true,
            show: false, // 不显示刻度线
          },
          axisLabel: { // 坐标轴标签
            color: '#666', // 字体颜色
            fontSize: 12, // 字体大小
            fontWeight: 'bold', // 字体加粗
            margin: 10, // 标签与轴线距离
          },
          axisLine: { // 坐标轴线
            lineStyle: {
              color: '#666', // 线条颜色
            },
          },
        },
        yAxis: {
          type: 'value',
          axisTick: {
            show: false, // 不显示刻度线
          },
          axisLabel: { // 坐标轴标签
            color: '#666', // 字体颜色
            fontSize: 12, // 字体大小
            fontWeight: 'bold', // 字体加粗
            margin: 10, // 标签与轴线距离
          },
          axisLine: { // 坐标轴线
            lineStyle: {
              color: '#666', // 线条颜色
            },
          },
          splitLine: { // 分隔线
            lineStyle: {
              color: ['#ccc'], // 线条颜色为浅灰色
              type: 'dashed', // 线条类型为虚线
            },
          },
        },
        series: [
          {
            name: '原力值',
            type: 'line',
            data: this.UserList.map(item => item.score),
            itemStyle: {
              color: '#6CB1FF',
              borderColor: '#fff',
              borderWidth: 2,
            },
            lineStyle: {
              color: '#6CB1FF',
              width: 2,
            },
            symbol: 'circle', // 折线点样式为实心圆
            symbolSize: 5, // 折线点大小
            markLine: { // 区域标记线
              silent: true, // 鼠标悬停时不显示标记线
              lineStyle: {
                color: '#FFA500', // 标记线颜色
                type: 'dashed', // 标记线类型为虚线
                width: 2, // 标记线宽度
              },
              label: { // 标记线文字标签
                show: true, // 显示标签
                position: 'start', // 标签位置
                distance: 5, // 标签与标记线距离
                color: '#FFA500', // 标签颜色
                fontSize: 12, // 标签字体大小
                fontWeight: 'bold', // 标签字体加粗
                formatter: '{b}', // 标签内容格式
              },
              data: [{ // 标记线数据
                name: '平均原力值',
                yAxis: 800,
              }],
            },
          },
        ],
      };

      chart.setOption(options);
    }
  }
};
</script>
<style scoped>
body{
  overflow-x: scroll; /* 添加横向滚动条 */
}
h1,p{
  color: #77C0FF;
  margin: 50px auto;
}
@media (max-width: 768px) {
  .chart {
    width: 90%; /* 当横坐标较短时，宽度变窄 */
  }
}
@media (min-width: 769px) {
  .chart {
    width: 100%; /* 当横坐标较长时，宽度拉长 */
  }
}
.chart{
  height: 700px;
  margin: 0px auto; /* 调整上下边距 */
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 主轴居中 */
}

/* 给echarts容器添加border和box-shadow，美化效果 */
.chart {
  box-shadow: 2px 2px 10px rgba(0,0,0,0.1); /* 阴影效果 */
  border: 1px solid #77C0FF; /* 边框效果 */
  border-radius: 15px; /* 圆角效果 */
}
</style>